<template>
  <div style="margin-bottom: 60px;">
    <van-nav-bar title="发现" />
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item @close="getClass(cid)" v-model="cid" :options="option" />
    </van-dropdown-menu>
    <div v-for="item in count">
      <div class="user-icon">
        <img @click="goUserSend(item.id)" :src="item.buddha" alt="">
        <div @click="goUserSend(item.id)" style="font-weight: 700;">{{ item.username }}</div>
        <div class="school">{{ item.school }}</div>
      </div>
      <div class="count">{{ item.s_content }}</div>
      <div class="time">{{ item.s_time }}</div>
      <br>
      <hr>
    </div>
  </div>
</template>

<script>
import { getClassDataAPI, getSendAPI } from '../api/API'
export default {
  name: 'Find',
  data() {
    return {
      count: '',
      cid: 0,
      option: [
        { text: '默认排序', value: 0 },
        { text: '分类一', value: 1 },
        { text: '分类二', value: 2 },
        { text: '分类三', value: 3 }
      ],
    }
  },
  methods: {
    goUserSend(id) {
      this.$router.push('/usersend')
      sessionStorage.setItem('sendID', id)
    },
    // 排序方式
    getClass(cid) {
      getClassDataAPI(cid).then((res) => {
        console.log(res.data.data);
        this.count = res.data.data
      })
    }
  },
  mounted() {
    getSendAPI().then((res) => {
      console.log(res.data.data);
      this.count = res.data.data
    })
  }
}
</script>

<style scoped>
img {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  margin-right: 10px;
}

.user-icon {
  display: flex;
  align-items: center;
  margin: 10px;
}

.count {
  font-size: 25px;
  margin: 10px;
}

.time {
  float: right;
  padding-right: 30px;
  color: #ccc;
}

.school {
  margin-left: 20vw;
  color: #aaa;
}
</style>